<template>
  <div class="main-container-app">
    <el-row class="form-contain">
      <park-info-form @handleQueryParkInfo="handleQueryParkInfo"></park-info-form>
    </el-row>
    <div class="table-contain">
      <park-info-table :searchList="parkInfoRes" :listLoadingParkInfo="loading"
                       @handleCurrentChangeParkInfo="handleCurrentChangeParkInfo"
                       @handleSizeChangeParkInfo="handleSizeChangeParkInfo"></park-info-table>
    </div>
  </div>

</template>

<script>
  /* eslint-disable */
  import ParkInfoForm from "./parkInfoChild/parkInfoForm";
  import ParkInfoTable from "./parkInfoChild/parkInfoTable";
  import {fetchListParkInfo} from "../../api/recoll/parkInfo";

  export default {
    components: {
      ParkInfoTable,
      ParkInfoForm
    },
    data() {
      return {
        parkInfoRes: null,
        loading: false,
        queryData: '',
        listQuery: {
          page: 1,
          limit: 20
        }

      }
    },
    methods: {
      handleQueryParkInfo(val) {
        this.queryData = val
        this.listQuery.page = 1
        this.listQuery.limit = 20
        this.getDataListParkInfo()
      },
      handleCurrentChangeParkInfo(val) {
        this.listQuery.page = val
        this.getDataListDataRe()
      },
      handleSizeChangeParkInfo(val) {
        this.listQuery.limit = val
        this.listQuery.page = 1
        this.getDataListParkInfo()
      },
      getDataListParkInfo() {
        this.loading = true
        fetchListParkInfo(this.listQuery, this.queryData).then(res => {
          console.log(res)
            this.parkInfoRes = res
            this.loading = false
          },
          () => {
            this.loading = false
          })
      }
    }

  }
</script>

<style scoped>

</style>

